<template>
  <div class="plan-dialog">
    <el-dialog :visible.sync="visible">
      <div class="plan-container">
        <div class="panelWrap plan-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>{{ isEdit ? '修改救援工单' : '添加救援工单' }}</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="plan-main flex flexdc flexcenter m-t-30">
            <div>
              <!-- top合同内容 -->
              <div class="main-cont flex">
                <div class="cont-left m-r-20">
                  <!-- <div class="entryName m-b-20">
                    <span class="name"><span class="mustval">*</span>维保计划：</span>
                    <el-input v-model="form.planName" readonly class="entry-input co-input" placeholder="请选择计划" />
                    <el-button type="warning" class="m-l-10" @click="handleContrat">选择计划</el-button>
                  </div> -->

                  <div class="entryName m-b-20">
                    <span class="name"><span class="mustval">*</span>工单名称：</span>
                    <el-input v-model="form.maUnitName" placeholder="请输入工单名称" class="entry-input co-input" />
                  </div>

                  <div class="entryName m-b-20">
                    <span class="name"><span class="mustval">*</span>维保人员：</span>
                    <el-input v-model="form.workUserName" readonly class="entry-input co-input" placeholder="请选择维保人员" />
                    <el-button type="warning" class="m-l-10" @click="handlePerSon">选择人员</el-button>
                  </div>
                </div>

                <div>
                  <div class="demand m-b-20">
                    <span class="name"><span class="mustval">*</span>工单编号：</span>
                    <el-input v-model="form.name" class="co-input" placeholder="请输入工单编号" />
                  </div>
                  <div class="maType m-b-20">
                    <span class="name"><span class="mustval">*</span>工单类型：</span>
                    <el-select v-model="form.type" placeholder="请选择工单类型" class="co-input">
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
                <!-- <div class="con-right flex flexdc">
                  <div class="creDate co-date m-b-20">
                    <span class="name">&nbsp;&nbsp;&nbsp;<span class="mustval">*</span>预约时间：</span>
                    <el-date-picker
                      v-model="form.appointmentDate"
                      type="date"
                      placeholder="选择预约日期"
                    />
                  </div>
                  <div class="co-date lasDate m-b-20">
                    <span class="name"><span class="mustval">*</span>应完成时间：</span>
                    <el-date-picker
                      v-model="form.exceptDate"
                      type="date"
                      placeholder="选择应完成日期"
                    />
                  </div>
                </div> -->
              </div>
              <!-- 分割线 -->
              <el-divider>电梯选择面板</el-divider>

              <!-- 电梯选择面板 -->
              <div class="m-t-50 flex flexdc flexcenter">
                <!-- 电梯查询条件 -->
                <div class="flex">
                  <div class="elev-left">
                    <div class="entryName m-b-20">
                      <span class="name">电梯注册代码：</span>
                      <el-input v-model="parma.registerCode" class="entry-input co-input" />
                    </div>
                    <div class="entryName m-b-20">
                      <span class="code-name">位置码：</span>
                      <el-input v-model="parma.rescueCode" class="entry-input co-input" />
                    </div>
                  </div>
                  <div class="elev-right m-l-30">
                    <div class="entryName m-b-20">
                      <span class="name">使用场所：</span>
                      <el-input v-model="parma.usePlaceName" class="entry-input co-input" />
                    </div>
                    <div class="entryName m-b-20">
                      <span class="name">使用单位：</span>
                      <el-input v-model="parma.useUnitName" class="entry-input co-input" />
                    </div>
                  </div>
                </div>
                <div class="flex m-t-20">
                  <el-button class="flex flexac m-r-20 fs14" size="small" type="warning" @click="getEleList"><i class="co-i" /><span class="search1">查 询</span></el-button>
                  <el-button class="co-empty flexcenter m-l-25" type="info" @click="handleEmptySearch"><i class="iconfont icon-qingkong" />清 空</el-button>
                </div>
                <!-- 电梯列表 -->
                <el-table
                  ref="multipleTable"
                  class="m-t-30 con-table m-b-25"
                  type="expand"
                  :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)"
                  highlight-current-row
                  @select-all="handleCheck"
                  @select="handleCheck"
                  @selection-change="handleCheckChange"
                >
                  <!-- 复选框 -->
                  <el-table-column type="selection" align="center" width="55" height="40" />

                  <template v-for="item in tablehead">
                    <el-table-column :key="item.id" align="center" :prop="item.prop" :label="item.label" />
                  </template>

                  <el-table-column align="center" label="绑定状态">
                    <template slot-scope="scope">
                      <!-- <span :class="`status-${scope.row.bindState}`">
                        {{
                          scope.row.bindState === 0 ? '未绑定' :
                          scope.row.bindState === 1 ? '已录入' :
                          scope.row.bindState === 2 ? '已申请' :
                          scope.row.bindState === 3 ? '已绑定' :
                          scope.row.bindState === 4 ? '已拒绝' : '未确认'
                        }}
                      </span> -->
                    </template>
                  </el-table-column>

                </el-table>
              </div>
            </div>

            <div class="flex footer m-t-70 m-b-40">
              <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
              <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
              <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <WorkPlan v-model="conVisible" @update="handleWorkUpdate" @updates="handleWorkUpdates" @handleCloseDialog="handleClosePCDialog" />
    <Personnel v-model="perVisible" @update="handlePerUpdate" @handleCloseDialog="handleClosePerDialog" />
  </div>
</template>

<script>

import WorkPlan from './workPlan'
import Personnel from './personnel'
import { showNotice } from '@/utils/toolclass'
import { miOrderAdd, miOrderUpdate } from '@/api/maintenance/order'
import { elevatorQueryList } from '@/api/elevator/elevator'

export default {
  components: { WorkPlan, Personnel },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      conVisible: false,
      perVisible: false,
      creValue: '',
      lasValue: '',
      maValue: '',
      dataList: [],
      // typeOptions: [
      //   {
      //     value: '1',
      //     label: '维保工单'
      //   },
      //   {
      //     value: '2',
      //     label: '救援工单'
      //   }
      // ],
      typeOptions: [
        {
          value: '1',
          label: '维保工单'
        }
      ],
      catValue: '',
      tablehead: [
        {
          index: 0,
          prop: 'registerCode',
          label: '电梯注册代码',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'rescueCode',
          label: '位置码',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'usePlaceName',
          label: '使用场所',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'useUnitName',
          label: '使用单位',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ],
      form: { ...this.data },
      formOrigin: {
        acceptTime: '',
        arriveTime: '',
        assignTime: '',
        crtDate: '',
        crtOpr: '',
        deviceId: '',
        dispatcherId: '',
        downImage: '',
        elevatorId: '',
        finishTime: '',
        id: 0,
        inImage: '',
        lstEdtDate: '',
        lstEdtOpr: '',
        maUnitName: '',
        maUnitid: '',
        orderNumber: '',
        orgId: '',
        otherImage: '',
        placeId: '',
        planId: '',
        registerCode: '',
        remark: '',
        rescueCode: '',
        roomImage: '',
        signImage: '',
        state: '',
        topImage: '',
        type: '维保工单',
        userUnitId: '',
        userUnitName: '',
        version: '',
        videoPath: '',
        workUserName: '',
        workmanId: ''
      },
      paging: {
        currentPage: 1,
        pageSize: 4,
        pageSizeArr: [4, 8, 10, 14],
        total: 0
      },
      parma: {
        bindState: '',
        id: '',
        registerCode: '',
        registerUnit: '',
        rescueCode: '',
        maintenanceUnitId: '',
        useUnitId: ''
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  created() {},
  mounted() {
    // this.getElevatorList()
  },
  methods: {
    handleSave(types) {
      const params = {
        acceptTime: this.form.acceptTime, // 接单时间
        arriveTime: this.form.arriveTime, // 达到时间
        assignTime: this.form.assignTime, // 派单时间
        crtDate: this.form.crtDate, // 创建时间
        crtOpr: this.form.crtOpr, // 创建人
        deviceId: this.form.deviceId, // 救援设备ID
        dispatcherId: this.form.dispatcherId, // 派单员ID
        downImage: this.form.downImage, // 地坑图片路径
        elevatorId: this.form.elevatorId, // 电梯ID --
        finishTime: this.form.finishTime, // 完成时间
        id: this.form.id, // id
        inImage: this.form.inImage, // 轿厢图片路径
        lstEdtDate: this.form.lstEdtDate, // 最后修改时间
        lstEdtOpr: this.form.lstEdtOpr, // 最后修改人ID
        maUnitName: this.form.maUnitName, // 维保单位
        maUnitid: this.form.maUnitid, // 维保单位ID --
        orderNumber: this.form.orderNumber, // 工单编号
        orgId: this.form.orgId, // 机构id
        otherImage: this.form.otherImage, // 其他图片路径
        placeId: this.form.placeId, // 使用场合ID
        planId: this.form.planId, // 计划ID --
        registerCode: this.form.registerCode, // 电梯注册
        remark: this.form.remark, // 备注
        rescueCode: this.form.rescueCode, // 电梯求援代码
        roomImage: this.form.roomImage, // 机房图片路径
        signImage: this.form.signImage, // 签到图片路径
        state: this.form.state ? this.form.state : 1, // 1：发起，2：受理：3：指派：4：接单，5：处理，6：完成
        topImage: this.form.topImage, // 轿顶图片路径
        type: 1, // 1：维保工单，2：救援工单(暂时写死唯1) --
        // type: this.form.type === '维保工单' ? 1 : 2, // 1：维保工单，2：救援工单 --
        userUnitId: this.form.userUnitId, // 使用单位ID --
        userUnitName: this.form.userUnitName, // 使用单位名称
        version: this.form.version, // 版本号
        videoPath: this.form.videoPath, // videoPath现场视频路径
        workUserName: this.form.workUserName, // 维保工人名称
        workmanId: this.form.workmanId // 维保工人ID --
      }
      // console.log(params)
      if (types === 0) {
        this.handleCreate(params)
      } else {
        this.handleUpdate(params)
      }
    },
    handleCreate(data) {
      miOrderAdd(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.code === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handlePerSon() {
      this.perVisible = true
    },
    // 人员回调更新
    handlePerUpdate(row) {
      this.form.workUserName = row.name
      this.form.workmanId = row.id
      // console.log(row)
    },
    // 计划回调更新
    handleUpdate(data) {
      miOrderUpdate(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.code === '失败') {
            showNotice('error', '提示', '更新失败')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 合同回调更新
    handleWorkUpdate(row) {
      this.form.planName = row.name
      this.form.planId = row.id
      this.form.maUnitName = row.maUnitName
      this.form.maUnitid = row.maUnitId
      // console.log(row)
    },
    // 电梯信息回调更新
    handleWorkUpdates(rows) {
      this.dataList = rows
      // console.log(rows)
    },
    handleContrat() {
      this.conVisible = true
    },
    handleCloseDialog() {
      this.visible = !this.visible
    },
    getEleList() {
      if (this.dataList) {
        this.dataList = this.dataList.filter(item => {
          if (item.registerCode.toLowerCase().indexOf(this.parma.registerCode) > -1) {
            return this.dataList.push(item)
          }
        })
        this.dataList = this.dataList.filter(item => {
          if (item.rescueCode.toLowerCase().indexOf(this.parma.rescueCode) > -1) {
            return this.dataList.push(item)
          }
        })
        this.dataList = this.dataList.filter(item => {
          if (item.usePlaceName.toLowerCase().indexOf(this.parma.usePlaceName) > -1) {
            return this.dataList.push(item)
          }
        })
        this.dataList = this.dataList.filter(item => {
          if (item.useUnitName.toLowerCase().indexOf(this.parma.useUnitName) > -1) {
            return this.dataList.push(item)
          }
        })
      }
    },
    getElevatorList() {
      elevatorQueryList(this.parma.bindState, this.parmaid, this.parma.maintenanceUnitId, this.paging.currentPage, this.paging.pageSize, this.parma.registerCode, this.parma.registerUnit, this.parma.rescueCode, this.parma.useUnitId).then(res => {
        if (res.code === '000000') {
          this.dataList = res.data ? res.data : []
          const i = this.dataList.map(item => item)
          this.paging.total = i.length
        } else {
          // showNotice('error', '提示', res.msg)
        }
        // console.log(res)
      })
    },
    // 单选操作，全选按钮失效操作
    handleCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.form.elevatorId = row.id
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },

    // 取消单选的checkbox
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    handleEmptySearch() {
      this.parma.registerCode = ''
      this.parma.rescueCode = ''
      this.parma.maintenanceUnitId = ''
      this.parma.useUnitId = ''
      // this.handleConUpdates()
    },
    handleClosePCDialog() {
      this.conVisible = !this.conVisible
    },
    handleClosePerDialog() {
      this.perVisible = !this.perVisible
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/public.scss";
.plan-dialog {
  .plan-container {
    margin-top: -130px;
    width: 1000px;
    background: #ffffff;
    margin-left: -200px;
    .plan-content {
      min-height: 560px;
      .plan-main {
        .code-name {
          margin-left: 40px;
        }
        .co-date {
          margin-left: 28px;
        }
        .creDate {
          margin-left: 31px;
        }
        .main-cont {
          justify-content: center;
          .con-right {
            width: 360px;

          }
          .con-left {
          }
        }
        .status-0 {
          color: red;
          font-size: 16px;
          font-weight: 700;
        }
        .status-1 {
          color: darkgoldenrod;
          font-size: 16px;
          font-weight: 700;
        }
        .status-2 {
          color: blue;
          font-size: 16px;
          font-weight: 700;
        }
        .status-3 {
          font-size: 16px;
          font-weight: 700;
        }
        .status-4 {
          font-size: 16px;
          font-weight: 700;
        }
        .status-5 {
          font-size: 16px;
          font-weight: 700;
        }
      }
      .footer {
        .btn {
          height: 40px;
        }
      }
    }
  }
}
</style>
